<template>
    <el-form :label-position="'right'" :label-width="labelWidth || '130px'" :model="formData" size="small">
        <el-form-item label="审核意见" v-if="showState">
            <el-select v-model="formData.state" placeholder="请选择" size="small">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资源类型" v-if="showType">
            <el-select v-model="formData.type" placeholder="请选择" size="small">
                <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="原因说明" v-if="showState">
            <el-input type="textarea" v-model="formData.remark" :autosize="{ minRows: 4, maxRows: 4}"
                      size="small"></el-input>
        </el-form-item>
        <div class="btn" v-if="showBtn">
            <el-button type="primary" size="small" @click="save">确认</el-button>
<!--            <el-button size="small" @click="del">取消</el-button>-->
        </div>
    </el-form>
</template>

<script>
    import upload from './upload'

    export default {
        name: '',
        // props: ['labelWidth', 'showType', 'type', 'showState', 'showBtn'],
        props: {
            /* 表单缩进值 */
            labelWidth: {
                type: String,
                default: () => {
                    return '130px'
                }
            },
            /* 是否显示资源类型 */
            showType: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            /* 默认资源类型 */
            type: {
                type: Number,
                default: () => {
                    return 3
                }
            },
            /* 是否显示审核意见 */
            showState: {
                type: Boolean,
                default: () => {
                    return true
                }
            },
            /* 是否显示按钮 */
            showBtn: {
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        data() {
            return {
                formData: {
                    remark: '',
                    state: 2,
                    type: 3
                },
                options: [{
                    value: 2,
                    label: '审核通过'
                }, {
                    value: 3,
                    label: '审核不通过'
                }],
                fileList: [],
                typeOptions: [
                    {
                        label: '服务接口类',
                        value: 1
                    },
                    {
                        label: '数据交换类',
                        value: 3
                    },
                    {
                        label: '服务页面类',
                        value: 2
                    }
                ]
            }
        },
        watch: {
            type(val) {
                this.formData.type = val
            }
        },
        mounted() {
            this.formData.type = this.type || 3
        },
        methods: {
            save() {
                let _this = this
                this.$emit('save', this.formData, this.fileList, () => {
                    _this.fileList = []
                    _this.formData = {
                        remark: '',
                        state: 2,
                        type: 3
                    }
                })
            },
            del() {
                this.$emit('del')
            }
        },
        components: {
            upload
        }
    }
</script>

<style scoped lang="less">
    .btn {
        margin-top: 60px;
        text-align: center;
    }
</style>
